<!--  -->
<template>
    <div class=''>
        <!-- 面包屑导航区，图标分隔符 -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{path:'/home'}">首页</el-breadcrumb-item>
            <el-breadcrumb-item>用户管理</el-breadcrumb-item>
            <el-breadcrumb-item>用户列表</el-breadcrumb-item>
            </el-breadcrumb-item>
        </el-breadcrumb>
        <!-- 卡片视图 -->
        <el-card>
            <!-- 搜索与添加区 -->
            <!-- 这里用el-row布局,gutter是组件的间距 -->
            <el-row :gutter="20">
                <el-col :span="7">
                    <el-input placeholder="请输入内容" v-model="queryInfo.query" clearable @clear="getUserList">
                        <el-button slot="append" icon="el-icon-search" @click="getUserList"></el-button>
                    </el-input>
                </el-col>
                <el-col :span="4">
                    <el-button type="primary" @click="addDialogVisible=true">添加用户</el-button>
                </el-col>
            </el-row>

            <!-- 用户列表table区域 -->
            <el-table :data="userList" border stripe>
                <el-table-column label="#" type="index"></el-table-column>
                <el-table-column label="姓名" prop="username" width="140px"></el-table-column>
                <el-table-column label="邮箱" prop="email" width="140px"></el-table-column>
                <el-table-column label="电话" prop="mobile" width="140px"></el-table-column>
                <el-table-column label="角色" prop="role_name" width="140px"></el-table-column>
                <el-table-column label="状态" width="140px">
                    <template slot-scope="scope">
                        <el-switch v-model="scope.row.mg_state" @change="userStateChanged(scope.row)"></el-switch>
                    </template>
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <!-- 修改按钮 -->
                        <el-button type="primary" icon="el-icon-edit" size="mini" @click="showEditDialog(scope.row.id)">
                        </el-button>
                        <!-- 删除按钮 -->
                        <el-button type="danger" icon="el-icon-delete" size="mini" @click="removeUserById(scope.row.id)"></el-button>
                        <el-tooltip effect="dark" content="分配角色" placement="top" :enterable="false" >
                            <el-button type="warning" icon="el-icon-setting" size="mini" @click="setRole(scope.row)"></el-button>
                        </el-tooltip>
                    </template>
                </el-table-column>
            </el-table>

            <!-- 分页 -->
            <el-pagination :total="total" :current-page="queryInfo.pagenum" :page-size="queryInfo.pagesizes"
                @current-change="handleCurrentChange" @size-change="handleSizeChange" :page-sizes="[2,3,5,8]"
                layout="total,sizes,prev,pager,next,jumper">
            </el-pagination>
        </el-card>

        <!-- 添加用户的对话框 -->
        <el-dialog title="添加用户" width="50%" :visible.sync="addDialogVisible" @close="addDiaolgClose" ref="addForm">
            <!-- 内容主体区 -->
            <el-form :model="addForm" :rules="addFormRules" ref="addForm" label-width="70px">
                <el-form-item label="用户名" prop="username">
                    <el-input v-model="addForm.username" placeholder="请输入用户名"></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-input v-model="addForm.password" placeholder="请输入用密码"></el-input>
                </el-form-item>
                <el-form-item label="邮箱" prop="email">
                    <el-input v-model="addForm.email" placeholder="请输入用邮箱"></el-input>
                </el-form-item>
                <el-form-item label="手机" prop="mobile">
                    <el-input v-model="addForm.mobile" placeholder="请输入用手机"></el-input>
                </el-form-item>
            </el-form>
            <!-- 底部区 -->
            <span class="btns">
                <el-button @click="addDialogVisible=false">取消</el-button>
                <el-button type="primary" @click="addUser">确定</el-button>
            </span>
        </el-dialog>

        <!-- 修改用户对话框 -->
        <el-dialog title="修改用户" width="50%" :visible.sync="editDialogVisible">
            <!-- 内容主体区 -->
            <el-form :model="editForm" :rules="addFormRules" ref="editForm" label-width="70px">
                <el-form-item label="用户名" prop="username">
                    <el-input v-model="editForm.username" placeholder="请输入用户名" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="邮箱" prop="email">
                    <el-input v-model="editForm.email" placeholder="请输入用邮箱"></el-input>
                </el-form-item>
                <el-form-item label="手机" prop="mobile">
                    <el-input v-model="editForm.mobile" placeholder="请输入用手机"></el-input>
                </el-form-item>
            </el-form>
            <!-- 底部区 -->
            <span class="btns">
                <el-button @click="editDialogVisible=false">取消</el-button>
                <el-button type="primary" @click="editUserInfo">确定</el-button>
            </span>
        </el-dialog>


        <!-- 分配角色对话框 -->
        <el-dialog title="分配角色" width="50%" :visible.sync="setRoleDialogVisible" @close="setRoleDialogClosed">
           <div>
               <p>当前用户：{{userInfo.username}}</p>
               <p>当前角色：{{userInfo.role_name}}</p>
               <p>分配新角色：</p>
               <el-select v-model="selectRoleId" placeholder="请选择">
                 <el-option v-for="item in rolesList" :label="item.roleName" :value="item.id" :key="item.id"></el-option>
               </el-select>
           </div>
            <!-- 底部区 -->
            <span class="btns">
                <el-button @click="setRoleDialogVisible=false">取消</el-button>
                <el-button type="primary" @click="saveRoleInfo">确定</el-button>
            </span>
        </el-dialog>

    </div>
</template>

<script>
    //这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
    //例如：import 《组件名称》 from '《组件路径》';

    export default {
        //import引入的组件需要注入到对象中才能使用
        name: 'Users',
        components: {},
        props: {},
        data() {
            //这里存放数据

            //自定义验证的校验规则
            // 自定义邮箱规则
            var checkEmail = (rule, value, callback) => {
                const regEmail = /^\w+@\w+(\.\w+)+$/
                if (regEmail.test(value)) {
                    // 合法邮箱
                    return callback()
                }
                callback(new Error('请输入合法邮箱'))
            }

            // 自定义手机号规则
            var checkMobile = (rule, value, callback) => {
                const regMobile = /^1[34578]\d{9}$/
                if (regMobile.test(value)) {
                    return callback()
                }
                // 返回一个错误提示
                callback(new Error('请输入合法的手机号码'))
            }

            return {
                //获取用户列表的参数对象
                queryInfo: {
                    query: '',//查询关键字
                    pagenum: 1,//当前页码
                    pagesize: 5,//每页显示2条数据
                },

                userList: [],//所有的用户列表
                total: 0,//用户总数
                addDialogVisible: false,//控制添加用户对话框是否显示
                editDialogVisible: false,//控制修改用户的对话框的显示或隐藏
                deleteDialogVisible:false,//控制删除用户的对话框是否显示
                addForm: {//添加用户的表单数据
                    username: '',//用户名
                    password: '',//密码
                    email: '',//邮箱
                    mobile: '',//手机
                },
                addFormRules: {//添加表单的验证规则
                    username: [
                        { required: true, message: '用户名不能为空', trigger: 'blur' },
                        { require: true, min: 5, max: 15, message: '长度在 5 到 15 个字符', trigger: 'blur' }
                    ],
                    password: [
                        { required: true, message: '密码不能为空', trigger: 'blur' },
                        { require: true, min: 6, max: 15, message: '长度在 6 到 15 个字符', trigger: 'blur' }
                    ],
                    email: [
                        { required: true, message: '邮箱不能为空', trigger: 'blur' },
                        { validator: checkEmail, trigger: 'blur' }
                    ],
                    mobile: [
                        { required: true, message: '手机不能为空', trigger: 'blur' },
                        { validator: checkMobile, trigger: 'blur' }
                    ]
                },
                editForm: {},//编辑用户的表单
                setRoleDialogVisible:false,//分配角色对话框的显示/隐藏
                userInfo:{},//需要被分配角色的用户信息
                rolesList:[],//所有角色的数据列表
                selectRoleId:'',//已选中角色的id    
            };
        },
        //监听属性 类似于data概念
        computed: {},
        //监控data中的数据变化
        watch: {},
        //方法集合
        methods: {
            //获取用户列表数据
            async getUserList() {
                const { data: res } = await this.$http.get('users', { params: this.queryInfo })
                if (res.meta.status !== 200) return this.$message.error(res.meta.msg);
                // this.$message.success(res.meta.msg);
                // console.log(res);

                this.userList = res.data.users;
                this.total = res.data.total;
            },

            //监听pagesize改变的事件
            handleSizeChange(newSize) {
                // console.log('每页显示数量改变');
                // console.log(newSize);
                this.queryInfo.pagesize = newSize;
                this.getUserList();

            },

            //监听页码值改变的事件
            handleCurrentChange(newPage) {
                // console.log('页码改变');
                // console.log(newPage);
                this.queryInfo.pagenum = newPage;
                this.getUserList();
            },

            //监听switch开关状态的改变
            async userStateChanged(userInfo) {
                const { data: res } = await this.$http.put(`users/${userInfo.id}/state/${userInfo.mg_state}`);
                if (res.meta.status !== 200) {
                    userInfo.mg_state = !userInfo.mg_state;
                    return this.$message.error(res.meta.msg);
                }
                this.$message.success(res.meta.msg);
            },

            //监听添加用户的对话框的关闭事件
            addDiaolgClose() {
                this.$refs.addForm.resetFields();
            },

            //点击按钮，添加新用户
            addUser() {
                this.$refs.addForm.validate(async value => {
                    if (!value) return;//如果检验失败，直接返回
                    //可以发起添加用户的网络请求
                    const { data: res } = await this.$http.post('users', this.addForm);
                    // console.log(res);
                    if (res.meta.status != 201) {
                        this.message.error(res.meta.msg);
                    }
                    this.$message.success('添加用户成功!')
                    this.addDialogVisible = false;//隐藏添加的对话框
                    //重新获取用户列表数据
                    this.getUserList();
                })
            },


            //点击按钮 弹出修改用户对话框 修改之前要根据id查询出要修改的用户的信息
            async showEditDialog(id) {
                this.editDialogVisible = true;
                const { data: res } = await this.$http.get('users/' + id);
                // console.log(res);
                if (res.meta.status !== 200) return this.$message.error(res.meta.msg);
                this.editForm = res.data;
            },

            //修改用户信息并提交
            editUserInfo() {
                this.$refs.editForm.validate(async value => {
                    if (!value) return;

                    //表单预验证通过，发起网络请求
                    const { data: res } = await this.$http.put('users/' + this.editForm.id, { email: this.editForm.email, mobile: this.editForm.mobile })
                    // console.log(res);
                    if(res.meta.status!==200) return this.$message.error(res.meta.status);
                    this.$message.success(res.meta.msg);
                    this.getUserList();//更新用户信息
                    
                })
            },

            //根据id删除用户
            async removeUserById(id){
                //删除之前弹框询问是否删除
                const confirmResult=await this.$confirm('此操作将永久删除该用户，是否继续？','提示',{
                    confirmButtonTest:'确定',
                    cancelButtonText:'取消',
                    type:'warning',
                }).catch(error=>error)

                //如果用户点了取消按钮返回的是字符串cancle
                //如果用户点击了确定按钮返回的是字符串confirm
                if(confirmResult!=='confirm'){
                    return this.$message.info('已取消删除');
                }

                const {data:res}=await this.$http.delete('users/'+id);
                if(res.meta.status!==200) return this.$message.error(res.meta.msg);
                this.$message.success('删除成功');
                this.getUserList();//更新页码数据
            },

            //展示分配角色的对话框
            async setRole(userInfo){
                this.userInfo=userInfo;
                //在展示对话框之前，获取所有角色的列表
                const {data:res} =await this.$http.get('roles');
                if(res.meta.status!==200)return  this.$message.error(res.meta.status);
                this.rolesList=res.data;
                this.setRoleDialogVisible=true;
                
            },

//给用户分配角色
            async saveRoleInfo(){
                if(!this.selectRoleId) return this.$message.error('请选择一个角色');

                const {data:res}=await this.$http.put('users/'+this.userInfo.id+'/role',{rid:this.selectRoleId});
                if(res.meta.status!==200) return this.$message.error(res.meta.msg);

                this.$message.success(res.meta.msg);
                this.getUserList();
                this.setRoleDialogVisible=false;
            },

            //监听分配角色对话框关闭
            setRoleDialogClosed(){
                this.selectRoleId='';
                this.userInfo={};
            }
        },
        //生命周期 - 创建完成（可以访问当前this实例）
        created() {
            this.getUserList();
        },
        //生命周期 - 挂载完成（可以访问DOM元素）
        mounted() {

        },
        beforeCreate() { }, //生命周期 - 创建之前
        beforeMount() { }, //生命周期 - 挂载之前
        beforeUpdate() { }, //生命周期 - 更新之前
        updated() { }, //生命周期 - 更新之后
        beforeDestroy() { }, //生命周期 - 销毁之前
        destroyed() { }, //生命周期 - 销毁完成
        activated() { }, //如果页面有keep-alive缓存功能，这个函数会触发
    }
</script>
<style scoped lang='scss'>
    .btns {
        display: flex;
        justify-content: flex-end;
    }
</style>